import QtQuick 2.0
import CustomComponents 1.0
Rectangle {
    id:window
    anchors.fill: parent

    color: "#00000000"
    property int index: 0
    property variant aArraye
    property alias  alist: listm

   // property ListModel alist
    signal addlist( string order, string type ,string colr)

    onAddlist: {
        listm.append({order:order, Type: type, ballColor: colr})

    }

//    Databaseprovider{
//        que:"aaa"
//        onCh: {
//            listm.append({title:listView.count.toString(), picture: "content/pics/pancakes.jpg", ingredients: "Easing.Linear", method:  "DarkRed" })
//        }
//    }
    ListModel {
        id: listm
        ListElement { order: "1"; Type: "flish"; ballColor: "DarkRed" }
        ListElement { order: "1"; Type: "flish"; ballColor: "DarkRed" }
        ListElement { order: "1"; Type: "flish"; ballColor: "DarkRed" }
    }
    Rectangle{
        id:table
        x:window.width*0.1
        y:window.height*0.2
        height: window.height*0.75; width: window.width/2
        color:"gray"
        Component{
            id: delegate
            Item {
                id:i
                height: 40; width: window.width/2
                x:table.x

                Row {
                    Rectangle {  color: "black"
                        border.color: "white"
                        border.width: 1
                        width: background.width/3; height: background.height;
                        Text { text: order; anchors.centerIn: parent; color: "White" }
                    }
                    Rectangle {  color: "black"
                        border.color: "white"
                        border.width: 1
                        width: background.width/3; height: background.height;
                        Text { text: Type; anchors.centerIn: parent; color: "White" }
                    }
                    Rectangle{  color: "black"
                        border.color: "white"
                        border.width: 1
                        width: background.width/3; height: background.height;
                        Text { text: ballColor; anchors.centerIn: parent; color: "White" }
                    }
                }
                Rectangle{
                    id:background
                    anchors.fill: parent
                    color: "black"
                    border.color: "white"
                    border.width: 1
                    anchors.margins: 2
                    opacity: 0.5
                    state:focus?"clicked":""
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            parent.forceActiveFocus();
                            window.index=index;
                            console.debug(window.index.toString());
                        }
                    }

                    states: State {
                        name: "clicked"
                        PropertyChanges { target: background; color: "blue"; }
                    }
                    transitions: Transition {
                        // Make the state changes smooth
                        ParallelAnimation {
                            ColorAnimation { property: "color"; duration: 100 }
                        }
                    }
                }
            }
        }
    }
    ListView {
        id: listView
        snapMode: ListView.SnapOneItem
        anchors {left:parent.left; right:parent.right ;top:parent.top; bottom: parent.bottom;topMargin:100;bottomMargin: 100}
        model: listm
        delegate: delegate
    }
    Rectangle {
        id:h
        anchors.bottom:  listView.top
        anchors.left: table.left
        width: table.width
        height: 40
        color: "green"
        Row {
            Rectangle {
                color: "blue"
                border.color: "green"
                border.width: 1
                width: h.width/3; height: h.height;
                Text {font.pointSize: 12; text: "Order"; anchors.centerIn: parent; color: "White" }
            }
            Rectangle {
                color: "black"
                border.color: "green"
                border.width: 1
                width: h.width/3; height: h.height;
                Text { font.pointSize: 12; text: "Name"; anchors.centerIn: parent; color: "White" }
            }
            Rectangle{
                color: "green"
                border.color: "white"
                border.width: 1
                width: h.width/3; height: h.height;
                Text { font.pointSize: 12; text: "Date Create"; anchors.centerIn: parent; color: "White" }
            }
        }
    }
}
